<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>订单列表</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="https://unpkg.com/layui@2.6.8/dist/css/layui.css">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div class="layui-bg-gray" style="padding: 60px;">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
      <div class="layui-panel">
        <table class="layui-hide" id="orderTable" lay-filter="orderTable"></table>
      </div>
    </div>
  </div>
</div>


<script type="text/html" id="toolbarOrder">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="unifiedOrder">统一下单</button>
  </div>
</script>
<script type="text/html" id="barOrder">
  <a class="layui-btn layui-btn-xs" lay-event="payOrderReturn">退款</a>
  <a class="layui-btn layui-btn-xs" lay-event="payOrder">支付</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delOrder">删除</a>
</script>


<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.1/vue.js"></script>
<script src="https://unpkg.com/layui@2.6.8/dist/layui.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

<script th:inline="none">
  layui.use('table', function(){
    var table = layui.table;

    table.render({
      elem: '#orderTable'
      ,url:'/pay/orderList'
      ,toolbar: '#toolbarOrder' //开启头部工具栏，并为其绑定左侧模板
      ,defaultToolbar: ['filter', 'exports', 'print']
      ,title: '订单数据表'
      ,cols: [[
         {field:'id', title:'ID', width:80, fixed: 'left', unresize: true}
        ,{field:'body', title:'商品简述'}
        ,{field:'outTradeNo', title:'订单号', width:280}
        ,{field:'spbillCreateIp', title:'下单IP', width:140}
        ,{field:'tradeType', title:'类型', width:80}
        ,{field:'price', title:'单价', width:80}
        ,{field:'amount', title:'数量', width:80}
        ,{field:'totalFee', title:'合计', width:80}
        ,{field:'payStatus', title:'状态', width:100, templet: function(d){
            if (d.payStatus==10){
              return "未付款";
            }else if (d.payStatus==20){
              return "已付款";
            }
          }}
        ,{field:'createTime', title:'下单时间', width:160}
        ,{field:'payTime', title:'付款时间', width:160}
        ,{fixed: 'right', title:'操作', toolbar: '#barOrder', width:170}
      ]]
      ,page: true
    });

    //头工具栏事件
    table.on('toolbar(orderTable)', function(obj){
      switch(obj.event){
        case 'unifiedOrder':
          layer.open({
			id:"unifiedOrder",
            type: 2,
            title: "统一下单",
            area: ['500px', '450px'],
            content: ['unifiedOrder.html', 'no']
          });
          break;
      };
    });

    //监听行工具事件
    table.on('tool(orderTable)', function(obj){
      var data = obj.data;
      console.log(JSON.stringify(data));
      if(obj.event === 'delOrder'){
          layer.confirm('真的删除行么', function(index){
            axios.post('/pay/deleteOrder/'+data.id, {headers: {'Content-Type': 'application/json'}})
                    .then(function (res) {
                      console.log(res);
                      layer.close(index);
                      if (res.data.code==0){
                        layer.msg(res.data.msg, {
                          time: 2000
                        });
                        var table = layui.table;
                        table.reload('orderTable', {
                          page: {
                            curr: 1 //重新从第 1 页开始
                          }
                        }); //只重载数据
                      }else {
                        layer.msg(res.data.msg, {
                          time: 2000
                        });
                      }
                    })
                    .catch(function (e) {
                      console.log(e);
                    });
          });
      } else if(obj.event === 'payOrder'){
        console.log(data.codeURL);
        if (data.payStatus==20){
          layer.msg("订单已支付", {
            time: 2000
          });
          return;
        }
        parent.layer.open({
          id:"payOrder",
          type: 2,
          title: "支付订单",
          shade: [0],
          area: ['360px', '450px'],
          content: ['payOrder.html?codeUrl='+encodeURIComponent(data.codeURL), 'no']
        });
      } else if(obj.event === 'payOrderReturn'){
        layer.msg("退款条件不足", {
          time: 2000
        });
        /*
        //退款
        axios.post('/pay/entPay', {}, {headers: {'Content-Type': 'application/json'}})
            .then(function (res) {
              console.log(res);
              if (res.data.code==0){
                that.dialogClose();
                parent.location.reload();// 刷新父页面
              }else {
                layer.msg(res.data.msg, {
                  time: 2000
                });
              }
            })
            .catch(function (e) {
              console.log(e);
            });*/
      }
    });

  });

</script>

</body>
</html>